.tags-box {

    height: 100px;
    .bg_c;

    .perfect-scrollbar {
        height: 70px;
    }

    .new-tag-input {
        display: block;

        -webkit-border-bottom-left-radius: 0 !important;
        -moz-border-radius-bottomleft: 0 !important;
        -khtml-border-bottom-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;

        -webkit-border-bottom-right-radius: 0 !important;
        -moz-border-radius-bottomright: 0 !important;
        -khtml-border-bottom-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;

        border: solid 1px #d8d8d8;
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding: 2px 10px;
        outline: none;
    }

    .tags-wrapper {
        padding: 10px;
        .border-radius-bottom-left(2px);
        .border-radius-bottom-right(2px);
        border: solid 1px #d8d8d8;
        border-top: none;

        .group-tag {
            display: inline-block;

            .sdc-tag {
                border: solid 1px @main_color_n;
                background-color: @main_color_p;
                min-width: auto;
                .tag {
                    margin-right: 10px;
                }
            }
        }
        &.view-mode .group-tag {
            opacity: 1;
            background-color: #f8f8f8 !important;
            .sdc-tag {
                background: none;
                border-color: @main_color_o;
            }
        }
    }

}

